var db = require('../../utils/db');
var pinyin=require('../../utils/pinyin');
var tone=require('../../utils/tone');
var TopBar=require('../../components/TopBar');
var NavBar=require('../../components/NavBar');
var OffCanvas=require('../../components/OffCanvas');
var Loader=require('../../components/Loader');
var Nl2br=require('../../components/Nl2br');
var Words=require('../Words');
var Idiom=require('../Idiom');
var Proverb=require('../Proverb');
var English=require('../English');
var listData;

class Index extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            active:0,
            showOffCanvas:false
        };
    }

    componentWillMount(){
        if(!listData||this.props.location.query.rf==1){
            //读取数据库
            db.getList().then(list => {
                listData={};
                //分类
                list.forEach(o => {
                    if(!listData[o.type]){
                        listData[o.type]=[];
                    }
                    listData[o.type].push(o);
                });

                //排序
                for (var type in listData){
                    listData[type].sort((a, b) => {
                        return pinyin.getFullChars(a.name).localeCompare(pinyin.getFullChars(b.name));
                    });
                }

                this.setState({
                    active:this.props.location.query.i,
                    listData: listData
                });
            });
        }else {
            this.setState({
                active:this.props.location.query.i,
                listData: listData
            });
        }
    }

    /**
     * 点击列表项
     * @param item
     */
    handleClick(item){
        this.setState({
            showOffCanvas:true,
            name:item.name,
            desc:item.desc,
            example:item.example
        });
    }

    render() {
        const data=this.state.listData;
        if(!data){
            return <Loader/>
        }
        var activeIndex=+this.state.active;
        if(isNaN(activeIndex)){
            activeIndex=0;
        }
        const activeName=['WORDS', 'IDIOM', 'PROVERB', 'ENGLISH'];
        return (
            <div className="container container-fill container-column">
                <div className="views container-column">
                    <TopBar leftNav={{icon:'setting',href:'/setting'}} rightNav={{href:`/edit/${activeName[activeIndex]}`}}/>
                    <OffCanvas show={this.state.showOffCanvas} onBackClick={() => {this.setState({showOffCanvas:false})}}>
                        <div className="padding">
                            <h3>{this.state.name}</h3>
                            <Nl2br>{tone(this.state.desc)}</Nl2br>
                            <h5>例句：</h5>
                            <Nl2br>{this.state.example}</Nl2br>
                        </div>
                    </OffCanvas>
                    <div className="view-cards g" style={{transform:`translate3d(-${activeIndex*25}%,0,0)`}}>
                        <div className="view-card">
                            <div className="container container-fill container-scrollable">
                                <Words list={data['WORDS']} onClick={this.handleClick.bind(this)}/>
                            </div>
                        </div>
                        <div className="view-card">
                            <div className="container container-fill container-scrollable">
                                <Idiom list={data['IDIOM']} onClick={this.handleClick.bind(this)}/>
                            </div>
                        </div>
                        <div className="view-card">
                            <div className="container container-fill container-scrollable">
                                <Proverb list={data['PROVERB']} onClick={this.handleClick.bind(this)}/>
                            </div>
                        </div>
                        <div className="view-card">
                            <div className="container container-fill container-scrollable">
                                <English list={data['ENGLISH']} onClick={this.handleClick.bind(this)}/>
                            </div>
                        </div>
                    </div>
                </div>
                <NavBar active={activeIndex} onClick={(i) => {this.setState({active:i})}}/>
            </div>
        )
    }
}

module.exports = Index;